const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  target: "web",
  mode: "development",
  // 入口文件
  entry: './src/index.ts',
  // 出口文件
  output: {
    // 指定打包后的目录
    path: path.resolve(__dirname, "dist"),
    // 打包后的文件名
    filename: "bundle.js",
    // webpack不使用箭头函数
    environment: {
      arrowFunction: false
    }
  },
  // 设置打包是使用的模块
  module: {
    // 设置各种文件的打包规则和loader选择
    rules: [
      {
        test: /\.ts$/,
        use: [
          // 配置的babel
          {
            loader: "babel-loader",
            options: {
              // 配置兼容版本
              presets: [
                [
                  "@babel/preset-env",
                  {
                    targets: {
                      edge: "17",
                      firefox: "60",
                      chrome: "67",
                      safari: "11.1",
                    },
                    useBuiltIns: "usage",
                    corejs: "2.6.12",
                  },
                ],
              ]
            }
          },
          'ts-loader'
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      title: "Snake Game",
      template: "./src/index.html"    // 设置参照模板
    }),
    new CleanWebpackPlugin()
  ],
  // 设置能被引用的模块
  resolve: {
    extensions: ['.ts', '.js']
  }
}